<template>
	<view class="container">
		<view class="flexc banner">
			<!-- <image v-for="(item, index) in banners" :key="index" :src="item.pic" mode="widthFix"></image> -->
			<swiper autoplay="true">
				<swiper-item v-for="(item, index) in banners" :key="index">
					<view class="swiper-item" @tap="navTo2(item.url)">
						<image :src="item.pic" mode="aspectFill" />
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="input-content">
			<view class="input-item">
				<text class="tit">手机号码</text>
				<input type="number" v-model="form.contactPhone" placeholder="请输入手机号码" disabled="true" maxlength="11" />
			</view>
			<view class="input-item input-item-sms-code">
				<view class="input-wrapper">
					<view class="rf-input-wrapper">
						<view class="tit"></view>
						<input type="number" v-model="form.code" placeholder="请输入验证码" maxlength="6"
							data-key="contactPhone" />
					</view>
					<button class="sms-code-btn" :disabled="smsCodeBtnDisabled" @tap.stop="getSmsCode">
						<text v-if="!smsCodeBtnDisabled">获取验证码</text>
						<text v-else class="sms-code-resend">{{
							`重新发送 (${codeSeconds})`
						}}</text>
					</button>
				</view>
			</view>
			<view class="input-item">
				<text class="tit">旧付款密码</text>
				<!-- <input type="number" password  v-model="form.oldPassword" placeholder="请输入六位数字旧付款密码"
					maxlength="6" /> -->
					<u-input password v-model="form.oldPassword" placeholder="请输入六位数字旧付款密码" maxlength="6" type="digit" />
			</view>
			<view class="input-item">
				<text class="tit">新付款密码</text>
				<!-- <input type="number" password v-model="form.paypassword" placeholder="请输入六位数字新付款密码" maxlength="6" /> -->
				<u-input password v-model="form.paypassword" placeholder="请输入六位数字新付款密码" type="digit" maxlength="6"/>
			</view>
			<view class="input-item">
				<text class="tit">付款确认密码</text>
				<!-- <input type="digit" password v-model="form.paypassword_repetition" placeholder="请输入六位数字付款确认密码" 
					maxlength="6" /> -->
				<u-input v-model="form.paypassword_repetition" placeholder="请输入六位数字付款确认密码"  maxlength="6" password type="digit"  />
			</view>
		</view>

		<view class="input-content">

			<button class="confirm-btn" :class="'bg-' + themeColor.name" @tap="toSubmit">
				修改
			</button>
		</view>

		<view class="tips-bot" style="padding: 0 0 10px 10px;">
			<text style="color:#f00;">注：</text>
			<text style="color:#999;">付款密码：线上支付采购款的时候需要输入该密码！(默认密码：111111)</text>
		</view>

	</view>
</template>
<script>
	import {
		uploadImage,
		memberInfo
	} from '@/api/userInfo';
	import rfPickRegions from '@/components/rf-pick-regions';
	import pickerAddress from '@/components/liudx-pickerAddress/index.vue';
	import uInput from "uview-ui/components/u-input/u-input.vue";
	import {
		smsCode
	} from '@/api/login';
	import moment from '@/common/moment';
	export default {
		components: {
			rfPickRegions,
			pickerAddress,
			uInput
		},
		data() {
			return {
				form: {
					storeName: '',
					contactPerson: '',
					contactPhone: '',
					companyDetailAddress: '',
					alipay: '',
					busLicenecPic: '',
					shopImg: '',
					code: '',
				},
				profileInfo: {
					provinceId: '',
					cityId: '',
					countryId: ''
				},
				addressShow: false,
				city: '',
				imageList: [],
				desc: '碎屏宝说明',
				cardUrl1: '',
				cardUrl2: '',
				skus: ['门店', '商家'],
				smsCodeBtnDisabled: false,
				skuIndex: 0,
				checked: false,
				banners: [],
				codeSeconds: 0, // 验证码发送时间间隔
				reqBody: {}
			}
		},
		async onLoad(options) {
			this.$http.get(memberInfo).then(async r => {
				let storeId = r.storeId;
				if (storeId) {
					this.$http.get('/store/TStoreInfo/querystoreinfo?storeId=' + storeId).then(r => {
						this.form = r || {};
						this.form.paypassword = "";
					});
				}
			}).catch(() => {

			});
			this.$http.get('/bannerList?storeId=0').then(r => {
				let banners = r || [];
				let arr = [];
				banners.forEach(item => {
					if (item.orderCount == 7) {
						arr.push(item)
					}
				})
				this.banners = arr;
			});
			const time =
				moment().valueOf() / 1000 - uni.getStorageSync('registerSmsCodeTime');
			if (time < 60) {
				this.codeSeconds =
					this.$mConstDataConfig.sendCodeTime - parseInt(time, 10);
				this.handleSmsCodeTime(this.codeSeconds);
			} else {
				this.codeSeconds = this.$mConstDataConfig.sendCodeTime;
				this.smsCodeBtnDisabled = false;
				uni.removeStorageSync('registerSmsCodeTime');
			}
		},
		onShow() {},
		methods: {
			// onKeyInput(event) {
			// 	const value = event.detail.value
			// 	console.log('value:', value);
			// 	let i = event.target.value
			// 	let num = i.charAt(i.length - 1)
			// 	var reg = new RegExp("^[0-9]*$")
			// 	if (!reg.test(num)) {
			// 		return i.slice(0, -1)
			// 	} else {
			// 		return i
			// 	}

			// },


			addresspick(obj) {
				console.log(obj)
				let arr = ['province', 'city', 'area'];
				let place = '';
				arr.map(key => {
					place += obj[key].name
				})
				this.city = place;
				// this.provinceId = obj.province.id;
				// this.cityId = obj.city.id;
				// this.countryId = obj.area.id;
				this.profileInfo = obj;
			},
			getSmsCode() {
				this.reqBody['mobile'] = this.form.contactPhone;
				let checkSendCode = this.$mGraceChecker.check(
					this.reqBody,
					this.$mFormRule.sendCodeRule
				);
				if (!checkSendCode) {
					this.$mHelper.toast(this.$mGraceChecker.error);
					return;
				}
				this.$http
					.get(smsCode, {
						mobile: this.form.contactPhone,
						type: 'pwdedit'
					})
					.then(r => {
						if (r) {
							this.$mHelper.toast(`验证码发送成功`);
						} else {
							this.$mHelper.toast('验证码已发送.');
						}
						this.smsCodeBtnDisabled = true;
						uni.setStorageSync('registerSmsCodeTime', moment().valueOf() / 1000);
						this.handleSmsCodeTime(59);
					});
			},
			handleSmsCodeTime(time) {
				let timer = setInterval(() => {
					if (time === 0) {
						clearInterval(timer);
						this.smsCodeBtnDisabled = false;
					} else {
						this.codeSeconds = time;
						this.smsCodeBtnDisabled = true;
						time--;
					}
				}, 1000);
			},
			toSubmit() {
				let form = this.form;
				if (this.form.code == '') {
					this.$mHelper.toast('验证码不能为空');
					return;
				}
				if (
					this.form.paypassword !==
					this.form.paypassword_repetition
				) {
					this.$mHelper.toast('两次输入的密码不一致');
					return;
				}
				let obj = {
					storeId: this.form.id,
					code: this.form.code,
					oldPassword: this.form.oldPassword,
					paypassword: this.form.paypassword
				}
				this.$http
					.get(`/store/TStoreInfo/updateStorepwd`, obj)
					.then((res) => {
						this.$mHelper.toast('修改成功!');
						let storeId = res.id;
					})
					.catch(() => {

					});
			},
			handleGetRegions(e) {
				console.log(e)
				this.profileInfo.provinceId = e.provinceId;
				this.profileInfo.cityId = e.cityId;
				this.profileInfo.countryId = e.countryId;
			},
			getSku(e) {
				this.skuIndex = e.detail.value;
			},
			// 删除已选中图片
			close(e, index) {
				this.imageList[index].splice(e, 1);
			},
			// 监听图片上传
			uploadImage(index) {
				// 从相册选择6张图
				const _this = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: async function(res) {
						await _this.handleUploadFile(res.tempFilePaths, index);
					}
				});
			},
			// 依次上传图片
			async handleUploadFile(data, index) {
				data.forEach(item => {
					this.$http
						.upload(uploadImage, {
							filePath: item,
							image: 'file'
						})
						.then(async r => {
							if (index == 1) {
								this.form.busLicenecPic = r;
							} else {
								this.form.shopImg = r;
							}
						});
				});
			},
			goBack() {
				uni.navigateBack()
			},
			navTo2(url) {
				uni.navigateTo({
					url: url
				})
			},
			navTo(url) {
				uni.navigateTo({
					url: '/pages/' + url
				})
			}
		}
	}
</script>
<style lang='scss'>
	page {}

	.upload-box {
		.span {
			margin-bottom: 20rpx;
			display: block;
		}

		.upload {
			width: 100%;
			height: 300rpx;
			background-color: $page-color-light;
			border-radius: 10rpx;
			font-size: 28rpx;
			color: #999;
			line-height: 150%;
			margin-bottom: 20rpx;

			.span {
				font-size: 60rpx;
				margin-bottom: 0;
			}
		}
	}

	.confirm-btn {
		margin-top: 40rpx;
	}

	.input-content {
		margin: 20upx 20upx;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 10rpx;

		.input-tit {
			font-size: $font-base + 2upx;
			font-weight: 600;
			margin-bottom: 10rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-left: 20rpx;
			}
		}

		.input-item {
			display: flex;
			padding: 0 10upx;
			background: #fff;
			border-bottom: 1px solid #eee;
			height: 80upx;
			line-height: 80upx;
			margin-bottom: 0;
			position: relative;

			.info {
				font-size: $font-sm + 2upx;
			}

			.iconfont {
				line-height: 80rpx;
			}

			.pick {
				width: 100%;
				height: 80rpx;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 100;

				.uni-input {
					width: 100%;
					height: 80rpx;
				}
			}

			&:last-child {
				margin-bottom: 0;
			}

			.tit {
				width: 180upx;
				font-size: $font-sm + 2upx;
				color: $font-color-base;
				font-weight: bold;
			}

			.tit2 {
				min-width: 150rpx;
				width: auto;

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}

			input {
				width: calc(100% - 100upx);
				height: 80upx;
				line-height: 80upx;
				font-size: $font-sm + 2upx;
				color: $font-color-dark;
				background: transparent;
			}

			.span {
				flex: 1;
				font-size: $font-sm + 2upx;
				color: $font-color-dark;
			}

			.cell-icon {
				color: #666;
			}

			.date {
				height: 80upx;
				line-height: 80upx;
				font-size: $font-base + 2upx;
				color: $font-color-dark;
			}

			.gender-item {
				margin-right: 20upx;

				.gender-item-text {
					padding-left: 10upx;
				}

				radio .wx-radio-input.wx-radio-input-checked {
					background: $uni-color-primary;
					border-color: $uni-color-primary;
				}
			}

			.confirm-btn {
				width: 140rpx;
				height: 60rpx;
				margin: 10rpx 0 0 0;
				line-height: 60rpx;
				font-size: 28rpx;
			}
		}
	}

	.tips {
		color: #fa436a;
		font-size: 24rpx;
		padding: 10rpx 10rpx 0;
	}

	.input-item-sms-code {
		position: relative;
		width: 100%;

		.sms-code-btn {
			position: absolute;
			color: #111;
			right: 20upx;

			font-size: 28upx;
		}

		.sms-code-resend {
			color: #999;
		}

		.sms-code-btn:after {
			border: none;
			background-color: transparent;
		}
	}

	.banner {
		height: 300rpx;
		border-radius: 10rpx;
		background-color: #eee;
		margin: 0 20rpx;
		overflow: hidden;

		image {
			width: 100%;
		}

		swiper {
			width: 100%;
			height: 300rpx;

			swiper-item {
				image {
					width: 100%;
					height: 300rpx;
				}
			}
		}
	}
</style>